<template>
  <div class="box regBox">
    <van-nav-bar
      title="注册"
      right-text="登录"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-form validate-first @submit="onSubmit">
      <van-field
        v-model="un"
        name="username"
        placeholder="用户名"
        :right-icon="unReg"
      />
      <van-field
        v-model="tel"
        name="tel"
        clearable
        placeholder="手机号"
        :right-icon="telReg"
      />
      <van-field
        v-model="code"
        name="code"
        center
        clearable
        placeholder="短信验证码"
        :right-icon="codeReg"
      >
        <template #button>
          <van-button size="small" type="primary" :disabled="codeBtnReg" @click="onSendCode">{{codeTitle}}</van-button>
        </template>
      </van-field>
      <van-field
        v-model="pw"
        name="password"
        placeholder="密码"
        :right-icon="pwReg"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" :disabled="allReg">注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Form, Field, Button, Toast } from 'vant'
import { sendCode, register } from '@/request/index.js'

Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Toast)

export default {
  data () {
    return {
      un: '',
      tel: '',
      code: '',
      pw: '',
      codeTitle: '发送验证码',
      isCodeSend: false
    }
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    onClickRight () {
      this.$router.push('/login?to=' + this.$route.query.to)
    },
    onSendCode () {
      // 点击发送验证码的功能
      // 设置倒计时
      let i = 10
      // 倒计时期间,发送按钮不可点
      this.isCodeSend = true
      // 修改发送按钮文案
      this.codeTitle = i-- + 's后可发送'
      // 开启计时器
      const t = setInterval(() => {
        // 判断倒计时结束
        if (i === 0) {
          // 修改按钮文案
          this.codeTitle = '发送验证码'
          // 清除计时器
          clearInterval(t)
          // 将倒计时状态改成false,表示发送按钮可点
          this.isCodeSend = false
        } else {
          // 进行倒计时,并修改文案
          this.codeTitle = i-- + 's后可发送'
        }
      }, 1000)
      // 调用发送短信接口
      sendCode({
        tel: this.tel
      }).then(data => {
        // console.log(data.data)
        // 提示发送状态
        Toast(data.data.title)
      })
    },
    onSubmit (val) {
      // 表单提交时触发,同时获取到表单内的数据
      const that = this
      // console.log('点击了注册,表单被提交了', val)
      // 调用注册接口,将表单数据,发到接口
      register(val).then(data => {
        // 根据响应数据,判断注册状态
        if (data.data.code === 1) {
          // 成功的轻提示
          Toast({
            message: data.data.title,
            onClose () {
              // 当轻提示自动关闭后,跳转到登录页面
              that.$router.push('/login')
            }
          })
        } else {
          Toast({
            message: data.data.title
          })
        }
      })
    }
  },
  computed: {
    unReg () {
      // 测试次测试代码
      // 上线之前,请将所有的验证,替换成真实的正则表达式
      return this.un.length > 0 ? 'success' : 'cross'
    },
    telReg () {
      return this.tel.length > 0 ? 'success' : 'cross'
    },
    codeReg () {
      return this.code.length > 0 ? 'success' : 'cross'
    },
    pwReg () {
      return this.pw.length > 0 ? 'success' : 'cross'
    },
    allReg () {
      // 注册按钮的可用状态:根据所有输入框的验证 判断
      return this.unReg !== 'success' || this.telReg !== 'success' || this.codeReg !== 'success' || this.pwReg !== 'success'
    },
    codeBtnReg () {
      // 发送短信验证码按钮的可用状态:根据手机号的验证和倒计时状态 判断
      return this.telReg !== 'success' || this.isCodeSend
    }
  }
}
</script>

<style>
</style>
